import { config } from '../config/index'
import { generateUniqueId } from '../utils/index'
import { getCache, setCache, clearCache } from './cache'

/**
 * 批量上报
 * @param {*} data
 */
export function lazyBatchReport(data) {
  setCache(data)
  const cacheList = getCache()

  if (cacheList.length && cacheList.length >= config.batchSize) {
    console.log('批量上报', cacheList)
    report(cacheList)
    clearCache()
  }
}

export function report(data) {
  if (!config.url) {
    console.error('请设置数据上传url地址')
    return
  }

  const reportData = JSON.stringify({
    uuid: generateUniqueId(),
    data,
  })

  if (config.isImageReport) {
    imageReport(reportData)
  } else if (isSupportSendBeacon()) {
    sendBeaconReport(reportData)
  } else {
    xhrReport(reportData)
  }
}

/**
 * 图片上报
 * @param {*} data
 */
export function imageReport(data) {
  const image = new Image()
  image.src = `${config.url}?data=${encodeURIComponent(data)}`
}

/**
 *  xhr上报
 * @param {*} data
 */
export function xhrReport(data) {
  const xhr = new XMLHttpRequest()
  xhr.open('POST', config.url, true)
  xhr.setRequestHeader('Content-Type', 'application/json')
  xhr.send(JSON.stringify(data))
}

export function isSupportSendBeacon() {
  return 'sendBeacon' in navigator
}

// const reportFunction = isSupportSendBeacon() ? navigator.sendBeacon : xhrReport

/**
 * sendBeacon: 是一个由 Web API 提供的方法。用于异步地向服务器发送少量数据
 * 它特别适用于在页面即将卸载时发送数据，例如日志记录、用户行为分析等
 * 与传统的 XMLHttpRequest 或 fetch 请求不同
 * sendBeacon 方法在页面卸载时能够可靠地发送数据，而不会阻塞页面的卸载过程
 * @param {*} data
 */
export function sendBeaconReport(data) {
  if (window.requestIdleCallback) {
    window.requestIdleCallback(
      () => {
        window.navigator.sendBeacon(config.url, data)
      },
      { timeout: 3000 },
    )
  } else {
    setTimeout(() => {
      window.navigator.sendBeacon(config.url, data)
    })
  }
}
